<template>
    <div :id="options.domId">

    </div>
</template>
<script>
  export default {
    name: 'PicChart',
    props: ['options'],
    methods: {
      initPic(option) {
        let self = this;
        option.undone = option.undone == 0 && option.complete == 0  ? 1 : option.undone;
        document.getElementById(this.options.domId).setAttribute('_echarts_instance_', '');
        let options = {
          tooltip: {
            show: false,
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          itemStyle: {
            normal: {
              color: '#aaa'
            },
            emphasis: {
              color: '#aaa'
            }
          },
          hoverAnimation: false,
          series: [{
            type: 'pie',
            radius: ['90%', '100%'],
            color: option.color,
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [{
              value: option.complete,
              name: '完成率',
              label: {
                normal: {
                  formatter: '{d} %',
                  textStyle: {
                    color: '#555',
                    fontSize: option.sizeP
                  }
                }
              }
            }, {
              value: option.undone,
              name: '占位',
              label: {
                normal: {
                  formatter: option.text,
                  textStyle: {
                    color: '#555',
                    fontSize: option.sizeF
                  }
                }
              },
              tooltip: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: '#aaa'
                },
                emphasis: {
                  color: '#aaa'
                }
              },
              hoverAnimation: false
            }]
          }]
        };

        let myChart = document.getElementById(this.options.domId);

        let mainChart = this.$echarts.init(myChart);
        mainChart.setOption(options, true);
      }
    },
    watch: {
      'options.complete': function(val) {
        this.initPic(this.options);
      }
    },
    mounted() {
      this.initPic(this.options);
    }
  }
</script>
<style lang="scss" scoped>
  .char-box {
    width: 100%;
    padding: 24px;
    background-color: #ffffff;
  }
</style>
